<template>
  <view class="address-container">
    <!-- 顶部导航 -->
    <view class="address-header">
      <uni-icons type="arrowleft" size="24" color="#333" @click="goBack"></uni-icons>
      <text class="header-title">收货地址</text>
      <view class="header-actions">
        <text @click="goToAddAddress">添加</text>
      </view>
    </view>

    <!-- 地址列表 -->
    <scroll-view scroll-y class="address-list">
      <view class="empty-address" v-if="addressList.length === 0">
        <image src="/static/address/empty-address.png" class="empty-image"></image>
        <text class="empty-text">暂无收货地址</text>
        <button class="add-btn" @click="goToAddAddress">添加地址</button>
      </view>

      <view v-else>
        <view
            v-for="address in addressList"
            :key="address.id"
            class="address-item"
            :class="{ 'default': address.isDefault }"
        >
          <view class="address-content">
            <view class="address-header">
              <text class="name">{{ address.name }}</text>
              <text class="phone">{{ address.phone }}</text>
              <text class="default-tag" v-if="address.isDefault">默认</text>
            </view>

            <view class="address-detail">
              <text>{{ address.province }}{{ address.city }}{{ address.district }}{{ address.detail }}</text>
            </view>
          </view>

          <view class="address-actions">
            <view class="action-item" @click="setDefault(address.id)">
              <uni-icons
                  :type="address.isDefault ? 'check-circle-filled' : 'circle'"
                  size="24"
                  :color="address.isDefault ? '#e54d42' : '#999'"
              ></uni-icons>
              <text>默认地址</text>
            </view>

            <view class="action-item" @click="editAddress(address.id)">
              <uni-icons type="compose" size="24" color="#666"></uni-icons>
              <text>编辑</text>
            </view>

            <view class="action-item" @click="deleteAddress(address.id)">
              <uni-icons type="trash" size="24" color="#666"></uni-icons>
              <text>删除</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 添加地址按钮 -->
    <view class="add-address-btn" @click="goToAddAddress">
      <uni-icons type="plus" size="24" color="#fff"></uni-icons>
      <text>添加新地址</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 地址数据
const addressList = ref([
  {
    id: 1,
    name: '张美丽',
    phone: '138****8888',
    province: '北京市',
    city: '北京市',
    district: '朝阳区',
    detail: '朝阳北路101号朝阳大悦城A座1201室',
    isDefault: true
  },
  {
    id: 2,
    name: '李小姐',
    phone: '139****9999',
    province: '上海市',
    city: '上海市',
    district: '浦东新区',
    detail: '张江高科技园区科苑路88号',
    isDefault: false
  },
  {
    id: 3,
    name: '王先生',
    phone: '137****7777',
    province: '广东省',
    city: '深圳市',
    district: '南山区',
    detail: '科技园南区高新南一道飞亚达大厦',
    isDefault: false
  }
]);

// 设置默认地址
const setDefault = (id) => {
  addressList.value.forEach(address => {
    address.isDefault = address.id === id;
  });
};

// 编辑地址
const editAddress = (id) => {
  uni.navigateTo({
    url: `/pages/my/editAddress?id=${id}`
  });
};

// 删除地址
const deleteAddress = (id) => {
  uni.showModal({
    title: '删除地址',
    content: '确定要删除这个地址吗？',
    success: (res) => {
      if (res.confirm) {
        addressList.value = addressList.value.filter(address => address.id !== id);
      }
    }
  });
};

// 添加新地址
const goToAddAddress = () => {
  uni.navigateTo({
    url: '/pages/my/addAddress'
  });
};

const goBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.address-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 100rpx;
}

.address-header {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;

  .header-title {
    flex: 1;
    text-align: center;
    font-size: 34rpx;
    font-weight: 600;
  }

  .header-actions {
    width: 100rpx;
    text-align: right;
    font-size: 30rpx;
    color: #e54d42;
  }
}

.address-list {
  height: calc(100vh - 120rpx);
  padding: 20rpx;
}

.empty-address {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 70vh;

  .empty-image {
    width: 280rpx;
    height: 280rpx;
    margin-bottom: 40rpx;
  }

  .empty-text {
    font-size: 32rpx;
    color: #999;
    margin-bottom: 40rpx;
  }

  .add-btn {
    width: 240rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: linear-gradient(90deg, #e54d42, #ff6b6b);
    color: white;
    border-radius: 40rpx;
    font-size: 30rpx;
  }
}

.address-item {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  padding: 30rpx;

  &.default {
    border-left: 8rpx solid #e54d42;
  }

  .address-content {
    margin-bottom: 30rpx;

    .address-header {
      display: flex;
      align-items: center;
      margin-bottom: 15rpx;

      .name {
        font-size: 32rpx;
        font-weight: 600;
        margin-right: 20rpx;
      }

      .phone {
        font-size: 30rpx;
        color: #666;
        margin-right: 20rpx;
      }

      .default-tag {
        background-color: #fff0f0;
        color: #e54d42;
        padding: 4rpx 16rpx;
        border-radius: 20rpx;
        font-size: 24rpx;
      }
    }

    .address-detail {
      font-size: 28rpx;
      color: #666;
      line-height: 1.5;
    }
  }

  .address-actions {
    display: flex;
    justify-content: space-between;
    border-top: 1rpx solid #f0f0f0;
    padding-top: 20rpx;

    .action-item {
      display: flex;
      align-items: center;
      font-size: 26rpx;
      color: #666;

      text {
        margin-left: 8rpx;
      }
    }
  }
}

.add-address-btn {
  position: fixed;
  bottom: 30rpx;
  left: 30rpx;
  right: 30rpx;
  height: 90rpx;
  background: linear-gradient(90deg, #e54d42, #ff6b6b);
  border-radius: 45rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32rpx;
  font-weight: 600;
  box-shadow: 0 8rpx 20rpx rgba(229, 77, 66, 0.3);

  text {
    margin-left: 10rpx;
  }
}
</style>